@tailwind base;
@tailwind components;
@tailwind utilities;

/* 全局基础样式 */
@layer base {
  html {
    scroll-behavior: smooth;
  }

  body {
    font-family: 'Inter', 'Microsoft YaHei', Arial, sans-serif;
    color: #e5e7eb;
    line-height: 1.6;
    background: linear-gradient(135deg, #111827 0%, #1f2937 25%, #374151 50%, #1f2937 75%, #111827 100%);
    background-size: 400% 400%;
    animation: gradient-shift 20s ease infinite;
    min-height: 100vh;
  }

  * {
    box-sizing: border-box;
  }
}

/* 企业级组件样式 */
@layer components {
  /* 玻璃拟态卡片 - 深色主题 */
  .glass-card {
    background: rgba(17, 24, 39, 0.85);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(34, 211, 238, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    border-radius: 16px;
    transition: all 0.3s ease;
  }

  .glass-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 48px rgba(34, 211, 238, 0.15);
    border-color: rgba(34, 211, 238, 0.3);
  }

  /* 导航样式 */
  .nav-glass {
    background: rgba(17, 24, 39, 0.9);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(34, 211, 238, 0.2);
  }

  /* 按钮样式 */
  .btn-primary {
    @apply inline-flex items-center px-6 py-3 bg-cyan-600 text-white font-medium rounded-lg transition-all duration-300 hover:bg-cyan-500 hover:shadow-lg hover:shadow-cyan-500/25 focus:outline-none focus:ring-4 focus:ring-cyan-500/20;
  }

  .btn-secondary {
    @apply inline-flex items-center px-6 py-3 bg-gray-800/90 text-gray-200 font-medium rounded-lg border border-gray-600 transition-all duration-300 hover:bg-gray-700 hover:shadow-lg focus:outline-none focus:ring-4 focus:ring-gray-500/20;
  }

  .btn-ghost {
    @apply inline-flex items-center px-4 py-2 text-gray-300 font-medium rounded-lg transition-all duration-300 hover:bg-gray-800/50 hover:text-white;
  }

  /* 代码块样式 */
  .code-block {
    @apply bg-gray-900 text-gray-100 p-4 rounded-lg font-mono text-sm overflow-x-auto;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border: 1px solid rgba(34, 211, 238, 0.2);
  }

  .code-inline {
    @apply bg-gray-800 text-cyan-300 px-2 py-1 rounded font-mono text-sm border border-gray-600;
  }

  /* 标题样式 */
  .page-title {
    @apply text-4xl md:text-5xl font-bold bg-gradient-to-r from-cyan-400 to-blue-400 bg-clip-text text-transparent;
  }

  .section-title {
    @apply text-2xl md:text-3xl font-bold text-white mb-6;
  }

  .subsection-title {
    @apply text-xl font-semibold text-gray-200 mb-4;
  }

  /* 徽章样式 */
  .badge {
    @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium;
  }

  .badge-success {
    @apply bg-green-500/20 text-green-300 border border-green-500/30;
  }

  .badge-warning {
    @apply bg-yellow-500/20 text-yellow-300 border border-yellow-500/30;
  }

  .badge-info {
    @apply bg-blue-500/20 text-blue-300 border border-blue-500/30;
  }

  .badge-primary {
    @apply bg-cyan-500/20 text-cyan-300 border border-cyan-500/30;
  }

  /* 警告框样式 */
  .alert {
    @apply p-4 rounded-lg border-l-4;
  }

  .alert-info {
    @apply bg-blue-500/10 border-blue-400 text-blue-300;
  }

  .alert-success {
    @apply bg-green-500/10 border-green-400 text-green-300;
  }

  .alert-warning {
    @apply bg-yellow-500/10 border-yellow-400 text-yellow-300;
  }

  .alert-error {
    @apply bg-red-500/10 border-red-400 text-red-300;
  }

  /* 链接样式 */
  .link {
    @apply text-cyan-400 hover:text-cyan-300 transition-colors duration-200;
  }

  .link-external::after {
    content: " ↗";
    font-size: 0.8em;
    opacity: 0.7;
  }

  /* 表格样式 */
  .table {
    @apply w-full border-collapse bg-gray-800/50 backdrop-blur rounded-lg overflow-hidden shadow-sm border border-gray-600;
  }

  .table th {
    @apply bg-gray-700/50 px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider;
  }

  .table td {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-200 border-t border-gray-600;
  }

  /* 文档内容样式 */
  .prose {
    @apply max-w-none;
  }

  .prose h1 {
    @apply text-3xl font-bold text-white mb-6;
  }

  .prose h2 {
    @apply text-2xl font-bold text-gray-200 mb-4 mt-8;
  }

  .prose h3 {
    @apply text-xl font-semibold text-gray-300 mb-3 mt-6;
  }

  .prose p {
    @apply text-gray-300 mb-4 leading-relaxed;
  }

  .prose ul {
    @apply list-disc pl-6 mb-4 space-y-2;
  }

  .prose ol {
    @apply list-decimal pl-6 mb-4 space-y-2;
  }

  .prose li {
    @apply text-gray-300;
  }

  .prose blockquote {
    @apply border-l-4 border-cyan-400 pl-4 italic text-gray-300 bg-cyan-500/10 p-4 rounded-r-lg;
  }

  /* 侧边栏样式 */
  .sidebar {
    @apply fixed left-0 top-16 w-64 h-full bg-gray-900/95 backdrop-blur-lg border-r border-gray-700 overflow-y-auto z-40;
  }

  .sidebar-item {
    @apply block px-6 py-3 text-gray-300 hover:bg-cyan-500/10 hover:text-cyan-300 transition-colors duration-200;
  }

  .sidebar-item.active {
    @apply bg-cyan-500/20 text-cyan-300 border-r-2 border-cyan-400;
  }

  /* 响应式调整 */
  @media (max-width: 768px) {
    .sidebar {
      @apply transform -translate-x-full transition-transform duration-300;
    }
    
    .sidebar.open {
      @apply translate-x-0;
    }
  }

  /* 滚动条样式 */
  ::-webkit-scrollbar {
    width: 6px;
  }

  ::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
  }

  ::-webkit-scrollbar-thumb {
    background: rgba(0, 245, 255, 0.3);
    border-radius: 3px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 245, 255, 0.5);
  }
}

/* 动画效果 */
@layer utilities {
  .animate-fade-in {
    animation: fade-in 0.6s ease-out forwards;
  }

  .animate-slide-up {
    animation: slide-up 0.5s ease-out forwards;
  }

  .animate-float {
    animation: float 6s ease-in-out infinite;
  }

  .animate-glow {
    animation: glow 2s ease-in-out infinite alternate;
  }

  /* 延迟动画 */
  .delay-100 { animation-delay: 0.1s; }
  .delay-200 { animation-delay: 0.2s; }
  .delay-300 { animation-delay: 0.3s; }
  .delay-400 { animation-delay: 0.4s; }
  .delay-500 { animation-delay: 0.5s; }
} 